<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>纹理投影</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        // position: [120.170646, 30.28362, 12200], //相机的位置
        position: [120.170646, 30.28362, 2000], //相机的位置
        lookAt: [120.170646, 30.28362, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机上下移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        isOpenTextureProject: true, //开启纹理投影的功能
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            },
            // //shape底图
            // {
            //     url: 'http://localhost:9000/examples/resources/shp/Tiles/L{z}/{y}/{x}.shp', //shape底图的url
            //     url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/ShpCLipper/L{z}/{y}/{x}.shp', //shape底图的url
            //     urlDecimal: true, //shape底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'shape',  //shape底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            //     merge: true //几何体是否合并
            // }
        ]
    });

    window.app.on('Click', function (e) {
        console.log(e);
    });
    var projectTextureObject;

    btn();
    // app.openStats();

    function btn() {
        let button1 = new GE.Button('打开纹理投影', function () {
            if (projectTextureObject) {
                return;
            }
            openAnalysis();
        });
        app.ui.add(button1);

        let button2 = new GE.Button('旋转投影', function () {
            if (!projectTextureObject) {
                return;
            }
            projectTextureObject.setControlModel('rotate');
        });
        app.ui.add(button2);

        let button3 = new GE.Button('平移投影', function () {
            if (!projectTextureObject) {
                return;
            }
            projectTextureObject.setControlModel('translate');
        });
        app.ui.add(button3);

        let button4 = new GE.Button('隐藏控制器', function () {
            if (!projectTextureObject) {
                return;
            }
            projectTextureObject.hideControl();
        });
        app.ui.add(button4);

        let button5 = new GE.Button('关闭纹理投影', function () {
            closeAnalysis();
            projectTextureObject = null;
        });
        app.ui.add(button5);
    }

    function openAnalysis() {
        if (!projectTextureObject) {
            let aspect = 1.2722371967654986;
            let cameraParam = {
                cameraPosition: new GE.Point(120.16800608054275, 30.284839062566828, 500, '4326'),
                // targetPosition: new GE.Point(13377542.119303564, 3540532.0606621173, 0, '3857'),
                targetPosition: new GE.Point(120.16800608054275, 30.286839062566828, 0, '4326'),
                fov: 10,
                aspect: aspect,
                near: 10,
                far: 100000,
                controlModel:'translate'
            }
            let url = 'http://localhost:9000/examples/resources/video/bbb.flv'; //'http://localhost:9000/examples/resources/video/test.mp4';
            // let url = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8';
            // let url = 'https://demo.m3u8play.com/m3u8/out/demo.m3u8';
            // let url = 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8';
            // let url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F13%2F20200313105333_nHL5Z.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705916078&t=616f3e5ece42b335edb0dc1f7cded819';
            let textureProjectMix = 1;
            projectTextureObject = new GE.ProjectTextureObject();
            projectTextureObject.setCamera(cameraParam);
            let videoParam = { texture: url, isVideoTexture: true};
            projectTextureObject.setVideo(videoParam);
            projectTextureObject.openProject();

            //下面的接口用户可以根据需要设置
            /*
            projectTextureObject.setDistortion({isOpenDistortion: true, distortionStep: 0.1, distortionAngle: 15}); //设置反畸变矫正
            projectTextureObject.setMask({isOpenProjectMask: true, maskImage: 'http://localhost:9000/examples/resources/images/mask.png'}); //设置投影遮罩
            projectTextureObject.setProjectMix(1.0); //设置投影混合度
            projectTextureObject.setCoverShadow(false); //相对于相机被遮挡部分，是否投影
            projectTextureObject.setControlModel('translate'); //设置投影控制模式
            */

            if(fbxModel){
                // projectTextureObject.setProjectToScene(false); //设置是否投影到整个场景中
                // projectTextureObject.addObjProjected(fbxModel); //设置需要投影的模型, 可以设置多个。其他没有被设置的模型，不会被投影
            }
        }
    }

    function closeAnalysis() {
        if (!projectTextureObject) {
            return;
        }
        projectTextureObject.closeProject();
    }

    var fbxModel;
    function loadFbx() {
        fbxModel = new GE.OverLay({
            type: 'fbx',
            url: 'http://localhost:9000/examples/resources/fbx/xqazm.FBX',
            position: [120.170646, 30.28362, 50],
            noTextureProject: false, //是否禁止纹理投影
            // scale: [100, 100, 100],
            // rotation: [45, 0, 0],
            success: function () {
                // setTimeout(btn, 300);
                // btn();
            }
        });
        app.add(fbxModel);
    }

    loadFbx();

</script>

</html>